<template>
    <div>
        <el-card style="margin: 10px">
            <el-row :gutter="10">
                <i class="el-icon-arrow-left" @click="goBack()"></i>
                <el-divider direction="vertical"></el-divider>
                <span>{{ $t('index.bEchartType.20250324-5') }}</span>
            </el-row>
            <el-divider></el-divider>
            <div style="width: 70%">
                <el-row>
                    <el-form ref="queryForm" :model="queryParams">
                        <el-col :span="6">
                            <el-form-item prop="pageName">
                                <el-input v-model="queryParams.pageName"
                                    :placeholder="$t('index.bEchartType.20250324-2')" clearable
                                    style="width: 95%"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="1.5">
                            <el-button icon="el-icon-search" type="primary" @click="handleQuery">{{ $t('look')
                                }}</el-button>
                        </el-col>
                        <el-button icon="el-icon-refresh-left" style="margin-left: 5px" @click="resetQuery">{{
                            $t('reset') }}</el-button>
                    </el-form>
                </el-row>
            </div>
            <div class="general">
                <div class="topLeft">
                    <div style="padding: 10px 10px; background-color: #f8f8f9">
                        <span style="font-size: 15px; font-weight: bold">{{ $t('index.bEchartType.20250324-8') }}</span>
                        <span style="font-size: 15px; font-weight: bold; float: right">{{ selectedCount }}/{{ this.count
                            }}</span>
                    </div>
                    <el-row>
                        <el-table :border="false" ref="leftTableData" :data="menuTableData" max-height="373"
                            style="width: 100%" @selection-change="changeCheckBoxValueLeft">
                            <template slot="empty">
                                <el-empty :image-size="100"
                                    :description="$t('device.device-recycle.864193-8')"></el-empty>
                            </template>
                            <el-table-column :selectable="checkSelectable" type="selection"
                                width="55"></el-table-column>
                            <el-table-column label="id" prop="id" show-overflow-tooltip></el-table-column>
                            <el-table-column :label="$t('index.bEchartType.20250324-1')" prop="echartName"
                                show-overflow-tooltip></el-table-column>
                            <el-table-column :label="$t('index.bEchartType.20250324-3')" prop="echartType"
                                show-overflow-tooltip></el-table-column>
                        </el-table>
                    </el-row>
                </div>
                <div class="topCenter">
                    <el-button :disabled="add" type="primary" @click="rightAdd"><i
                            class="el-icon-arrow-right el-icon--right"></i></el-button>
                    <el-button :disabled="del" type="primary" @click="leftDelete"><i
                            class="el-icon-arrow-left el-icon--left"></i></el-button>
                </div>
                <div class="topRight">
                    <div style="padding: 10px 10px; background-color: #f8f8f9">
                        <span style="font-size: 15px; font-weight: bold">{{ $t('index.bEchartType.20250324-7') }}</span>
                        <span style="font-size: 15px; font-weight: bold; float: right">{{ selectedCount1 }}/500</span>
                    </div>
                    <el-row>
                        <el-table :border="false" ref="rightTableData" :data="rightTableData" max-height="373"
                            style="width: 100%" @selection-change="changeCheckBoxValueRight">
                            <template slot="empty">
                                <el-empty :image-size="100"
                                    :description="$t('device.device-recycle.864193-8')"></el-empty>
                            </template>
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column label="id" prop="id" show-overflow-tooltip></el-table-column>
                            <el-table-column :label="$t('index.bEchartType.20250324-1')" prop="echartName"
                                show-overflow-tooltip></el-table-column>
                            <el-table-column :label="$t('index.bEchartType.20250324-3')" prop="echartType"
                                show-overflow-tooltip></el-table-column>
                        </el-table>
                    </el-row>
                </div>
            </div>
            <div class="pagination-container">
                <pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum"
                    :pageSizes="[10, 20, 30, 40]" :pager-count="5" :total="total" @pagination="getlist" />
            </div>
            <div style="width: 100%">
                <el-form ref="allotForm" :model="allotForm" :rules="allotRules" label-position="top">
                    <div style="width: 45%; margin: 60px 0">
                        <el-form-item :label="$t('device.allot-import-dialog.060657-2')" prop="deptId">
                            <treeselect v-model="allotForm.deptId" :appendToBody="true" :options="deptOptions"
                                :show-count="true" :placeholder="$t('device.allot-import-dialog.060657-3')"
                                z-index="9000" />
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        </el-card>
        <div class="footer">
            <el-button type="primary" @click="confirmDistribution">{{ $t('device.device-select-allot.903153-14')
            }}</el-button>
        </div>
    </div>
</template>
<script type="text/javascript">
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import { deptsTreeSelect } from '@/api/system/user';

import { listBEchartType, assignment } from '@/views/zutai/api/zutai/bEchartType';

export default {
    components: {
        Treeselect,
    },
    data() {
        return {
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                orderByColumn: 'id',
                isAsc: 'desc',
            },
            count: 0,
            //导入表单
            allotForm: {
                deptId: 0,
            },
            deviceIds: {},
            selectedCount: 0,
            // 机构树选项
            deptOptions: [],
            selectedRow: null,
            add: true,
            del: true,
            leftTableData: [],
            rightTableData: [],
            selectedListLeft: [], //点击左边选中的组态
            selectedListRight: [], //点击右边 选中的组态
            menuTableData: [],
            //导入分配表单校验
            allotRules: {
                deptId: [{ required: true, message: '目标机构不能为空', trigger: 'change' }],
            },
        };
    },
    created() {
        this.getDeptTree();
        this.getlist();
    },
    computed: {
        selectedCount1() {
            return this.rightTableData.length;
        },
    },
    watch: {
        selectedListLeft: function (val) {
            if (val.length) {
                this.add = false;
            } else {
                this.add = true;
            }
        },
        selectedListRight: function (val) {
            if (val.length) {
                this.del = false;
            } else {
                this.del = true;
            }
        },
    },
    methods: {
        //获取
        getlist() {
            this.loading = true;
            listBEchartType(this.queryParams).then((response) => {
                console.log(response)
                this.menuTableData = response.rows;
                //isSelect用于判断是否可选
                this.menuTableData.map((item) => {
                    this.leftTableData.push(
                        Object.assign(item, {
                            isSelect: 0,
                        })
                    );
                });
                //分页后保持已选中状态
                if (this.rightTableData.length != 0) {
                    this.menuTableData.forEach((item, index) => {
                        this.rightTableData.forEach((item1) => {
                            if (item1.id == item.id) {
                                item.isSelect = 1;
                            }
                        });
                    });
                }
                this.total = response.total;
                if (this.count === 0) {
                    this.count = this.total;
                }
                this.loading = false;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getlist();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.rightTableData = [];
            this.resetForm('queryForm');
            this.handleQuery();
        },
        /** 查询机构下拉树结构 */
        getDeptTree() {
            this.allotForm.deptId = null;
            deptsTreeSelect().then((response) => {
                this.deptOptions = response.data;
            });
        },
        /** 返回按钮 */
        goBack() {
            const obj = {
                path: '/zutai/bEchartType',
            };
            this.$tab.closeOpenPage(obj);
        },
        //右边增加的数据
        rightAdd() {
            let leftTableData = JSON.parse(JSON.stringify(this.menuTableData));
            leftTableData.forEach((item, index) => {
                this.selectedListLeft.forEach((item1) => {
                    if (item.id == item1.id) {
                        this.rightTableData = this.rightTableData.concat(item).sort((a, b) => {
                            return a.id - b.id;
                        });
                        item.isSelect = 1;
                    }
                });
            });
            if (this.selectedCount1 != 0) {
                this.count = this.count - this.selectedListLeft.length;
            }
            leftTableData = leftTableData.filter((val) => {
                return val;
            });
            this.menuTableData = leftTableData;
            this.selectedListLeft = [];
        },
        //删除的数据
        leftDelete() {
            let rightTableData = JSON.parse(JSON.stringify(this.rightTableData));
            rightTableData.forEach((item, index) => {
                this.selectedListRight.forEach((item1) => {
                    this.menuTableData.forEach((item2) => {
                        if (item2.id == item1.id) {
                            item2.isSelect = 0;
                        }
                        if (item1.id == item.id) {
                            delete rightTableData[index];
                        }
                    });
                });
            });
            if (this.selectedCount1 != 0) {
                this.count = this.count + this.selectedListRight.length;
            }
            rightTableData = rightTableData.filter((val) => {
                return val;
            });
            this.rightTableData = rightTableData;
            this.selectedListRight = [];
        },
        checkSelectable(row) {
            let flag = true;
            if (row.isSelect === 0) {
                flag = true;
            } else {
                flag = false;
            }
            return flag;
        },
        //左边数据
        changeCheckBoxValueLeft(val) {
            this.selectedListLeft = val;
            this.selectedCount = val.length;
        },
        //右边
        changeCheckBoxValueRight(val) {
            this.selectedListRight = val;
        },
        //确定分配操作
        confirmDistribution() {
            this.$refs['allotForm'].validate((valid) => {
                if (valid) {
                    this.deviceIds = this.rightTableData.map((item) => item.id);
                    const zutaiId = this.deviceIds.join(',');
                    const deptId = this.allotForm.deptId;
                    const data = {
                        zutaiId: zutaiId,
                        deptId: deptId,
                    };
                    assignment(data).then((response) => {
                        if (response.code == 200) {
                            this.$modal.msgSuccess(response.msg);
                            this.resetQuery();
                        } else {
                            this.$modal.msgError(response.msg);
                        }
                    });
                }
            });
        },
    },
};
</script>
<style lang="scss">
.topCenter {
    .el-button+.el-button {
        margin-left: 0px;
        margin-top: 10px;
    }
}

.vue-treeselect__label {
    font-weight: normal;
    font-size: 14px;
    /* 取消加粗 */
}

.general {
    display: flex;
    align-items: center;
}

.topLeft {
    width: 45%;
    height: 373px;
}

.topCenter {
    width: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.topRight {
    width: 45%;
    height: 373px;
}

.footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    padding: 20px 50px 20px 360px;
    margin-bottom: 0 !important;
    color: #fff;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
}

.pagination-container {
    text-align: left;
    width: 45%;
    margin-left: 200px;
    margin-top: 20px;
}
</style>
